<template>
  <div class="input04">
    <label class="input04-label">
      <span style="color:red" v-show="req">*</span>
      {{title}}：
    </label>
    <div class="input04-input">
      <div
        style="width:100%;padding-right:10px;text-align: left;"
        v-on:click="buttonEvent"
      >{{value}}</div>
      <span v-on:click="del">X</span>
    </div>
  </div>
</template>
<style scoped>
.input04 {
  margin: 5px 0px;
  display: flex;
}
.input04-label {
  min-width: 40px;
  line-height: 32px;
  margin-right: 3px;
}
.input04-input {
  /* min-width: 150px; */
  width: 200px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 32px;
  line-height: 32px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
</style>
<script>
export default {
  name: "input04",
  props: {
    title: {
      default: ""
    },
    value: {
      default: ""
    },
    req: {
      default: false
    }
  },
  meta: {
    descr: "城市输入框"
  },
  data() {
    return {
      val: ""
    };
  },
  methods: {
    buttonEvent() {
      let that = this;
      that.$emit("click", that.citydata);
    },
    del() {
      let that = this;
      that.$emit("del");
    }
  }
};
</script>

